<template>
  <div class="listView" :id="listId">
    <div class="bar" @click="goDetail(item)" v-for="(item,index) in list">
      <div class="title">{{ item.roomName }}</div>
      <div class="time">
        <span style="float: left">开始时间：{{ item.startTime }}</span>
        <span style="float: right">结束时间：{{ item.endTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNo:1,//页码
      pageSize:5,//页数
      total:1,
      list:[],
      listId: 'list' + Math.floor(Math.random() * 100000),
    }
  },
  mounted() {
    document.getElementById(this.listId).addEventListener('scroll', this.Scrollbottom);
    this.getPage()
  },
  methods: {
    getPage() {
      let obj = {
        roomMode:'1,2',
        column:'createTime',
        order:'desc',
        pageNo:this.pageNo,
        pageSize:this.pageSize
      }
      const self = this;
      this.request({
        url: '/exam/ztExamRoom/list/my',
        method: 'get',
        params:obj
      }).then(function (res) {
        if (res){
          let list = res.data.result.records
          if (list){
            list.forEach(function (val){
              self.list.push(val)
            })
          }
          self.total = res.data.result.total
        }
      })
    },
    Scrollbottom () {
      let dom = document.getElementById(this.listId)
      let scrollTop = dom.scrollTop;
      let clientHeight = dom.clientHeight;
      let scrollHeight = dom.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        let totalPage = Math.ceil(this.total/this.pageSize);
        if (this.pageNo < totalPage){
          this.pageNo++
          this.getPage()
        }
      }
    },
    goDetail(item){
      this.$router.push({path: "/examShow", query: {roomId:item.id}})
    },
  }
}
</script>
<style lang="scss" scoped>
  .listView{
    position: fixed;
    z-index: 99;
    .bar{
      text-align: left;
      .title{
        font-size: 32px;
        line-height: 50px;
      }
      .time{
        font-size: 20px;
        color: #999;
        line-height: 50px;
      }
    }
  }
</style>
